<template>
  <div class="infobox">
    <h4 style="margin:0 0 10px 0">
      <span>信息管理</span>
    </h4>
    <div>fdsafdsdsf</div>
    <mapa :address="address" @mapLng="mapLng" ref="maps"></mapa>
    <div style="padding-left:20px">
      <el-form :model="ruleForm2"  :rules="rules2" ref="ruleForm2" label-width="80px" class="demo-ruleForm" >
        <el-form-item label="名称:" style="margin:0">
         <span>{{hostName}}</span>
        </el-form-item>
        <el-form-item label="账号:" style="margin-bottom:5px">
          <span>{{ruleForm2.account_name}}</span>
        </el-form-item>
        <el-form-item label="联系电话:" prop="tel">
          <el-input v-model.number="ruleForm2.tel" style="width:90%"></el-input>
        </el-form-item>
        <el-form-item label="营业时间:" prop="business_time">
          <el-input v-model="ruleForm2.business_time" style="width:90%"></el-input>
        </el-form-item>
        <el-form-item label="地址">
            <el-select v-model="ruleForm2.province"  @change="changeCity" filterable placeholder="选择省份" style="width:110px">
              <el-option v-for="item in ruleForm2.options1" :key="item.id" :label="item.areaname" :value="item.id" > </el-option>
            </el-select>
            <el-select v-model="ruleForm2.city" @change="changeArea" filterable placeholder="选择城市" style="width:110px">
              <el-option v-for="item in ruleForm2.options2" :key="item.id" :label="item.areaname" :value="item.id"> </el-option>
            </el-select>
            <el-select v-model="ruleForm2.area" @change="changeVal" filterable placeholder="选择区" style="width:110px">
              <el-option v-for="item in ruleForm2.options3" :key="item.id" :label="item.areaname" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
        <el-form-item label="具体地址:" prop="position">
          <el-input v-model="ruleForm2.position" style="width:90%"></el-input>
        </el-form-item>
        
        <el-form-item label="Logo:" prop="odress" style="width:90%">
          <div>
            <el-row>
              <el-col :span="12">
                <el-upload 
                  class="avatar-uploaderInfo"
                  action="https://upload.qiniup.com/"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :on-success="handleOkLogo"
                  :data="postData">
                  <img v-if="ruleForm2.logo_url" :src="ruleForm2.logo_url" class="avatarInfo">
                  <i v-else class="el-icon-plus avatar-uploader-iconInfo"></i>
                </el-upload>
               
              </el-col>
            </el-row>
          </div>
        </el-form-item>

        <el-form-item label="图片:" prop="odress">
          <div>
            <el-row>
              <el-col :span="24">
                <ul class="el-upload-list el-upload-list--picture-card">
                  <li style="float:left" :tabindex="index" class="el-upload-list__item is-success" v-for="(item,index) in fileList3" :key="index">
                    <img :src="item" alt="" class="el-upload-list__item-thumbnail">
                    <span class="el-upload-list__item-actions">
                      <span class="el-upload-list__item-preview" @click="shouimg(item)"><i class="el-icon-zoom-in"></i></span>
                      <span class="el-upload-list__item-delete" @click="deletImg(index)"><i class="el-icon-delete"></i></span>
                    </span>
                  </li>
                </ul>
                <el-upload  style="float:left"
                  action="https://upload.qiniup.com/"
                  list-type="picture-card"
                  :show-file-list="false"
                  :on-success="handleOkList"
                  :data="postData">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
        <el-form-item label="简介:" prop="odress">
          <el-input type="textarea" :rows="7" placeholder="请输入内容" v-model="ruleForm2.introduction" style="width:90%"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom:0px;">
            <el-button type="warning" @click="submitForm('ruleForm2',1)">保&nbsp;&nbsp;存</el-button>
            <el-button type="primary" @click="submitForm('ruleForm2',0)">提交审核</el-button>
        </el-form-item>
      </el-form>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
    
    <!-- <baidu-Map></baidu-Map> -->
  </div>
</template>

<script>
import axios from 'axios'
import Http from '@/Http/Http'
import baiduMap from './Hositem/baiduMap'
import mapa from './Hositem/map'
export default {
  props:['dataArtice'],
  components:{
    baiduMap,
    mapa
  },
  
  data() {
   
    var business_time = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入营业时间'));
      } else {
        
        callback();
      }
    };
    var tel = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('电话号码不能为空'));
      } 
      callback();
      
    };

    return {
      postData:{
        token:'', //token
      },
      mapdata:'',
      hostName:'',
      dialogVisible:false,
      dialogImageUrl:'',
      tokenimgUrl:'',
      address:'',
      fileList3:[],
      ruleForm2: {       
        options1:[],
        options2:[],
        options3:[],
        province:'',//省
        city:'',//市
        area:'',//区
        hospital_id:'',
        tel:'',
        account_name:'',
        logo_url:'', //logo地址
        business_time:'', //营业时间
        position:'',//具体地址
        introduction:'' //简介
      },
      
      rules2: {
        business_time: [
          { validator: business_time, trigger: 'blur' }
        ],
        tel: [
          { validator: tel, trigger: 'blur' }
        ]
      }
    };
  },
  created(){
    this.getToken()
    Http.getAreaList(0)
    .then( res => {
      this.ruleForm2.options1 = res.data.data;
    })
  },
  methods: {
    getToken() {
      Http.QiniuToken({})
      .then( res => {
        this.postData.token = res.data.data.uptoken;
        this.tokenimgUrl = res.data.data.domain
      })
      .catch( error => {
        this.$router.push('/')
        console.log(error)
      })
      Http.getHospitaInfo()
      .then( res => {
        this.ruleForm2.hospital_id = res.data.data.hospital_id
        this.ruleForm2.tel = res.data.data.tel;
        this.ruleForm2.introduction = res.data.data.introduction;
        this.ruleForm2.business_time = res.data.data.business_time;
        this.hostName = res.data.data.name;
        this.ruleForm2.position = res.data.data.position;
        this.ruleForm2.account_name = sessionStorage.getItem('userPass');
        this.ruleForm2.logo_url = res.data.data.logo_url;
        this.fileList3 = res.data.data.images;
        // console.log(res)
      })
      .catch( error => {
        //this.$router.push('/')
        console.log(error)
      })

      // Http.getAreaList(0)
      // .then( res => {
      //   this.ruleForm2.options1 = res.data.data;
      // })
    },

     changeCity(val){
      Http.getAreaList(val)
        .then( res => {
          this.ruleForm2.options2 = res.data.data;
          this.ruleForm2.options3 = '';
          this.ruleForm2.area = '';
          this.ruleForm2.city = '';
        })
    },
    changeArea(val){
      Http.getAreaList(val)
        .then( res => {
          this.ruleForm2.area = '';
          this.ruleForm2.options3 = res.data.data;
        })
    },
    changeVal(val){

    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      if (isJPG || isPNG) {
        return true;
      } else {
          this.$message.error('上传图片格式不正确!');
        return false;
      }
    },
    handleOkLogo(responed) {
      console.log(responed,'响应信息')
      this.ruleForm2.logo_url = `http://${this.tokenimgUrl}/${responed.key}`;
      console.log('上传图片',this.ruleForm2.logo_url)
    },


     // 图片列表 方法  -------------------------------------------------------|||||
    handleOkList(responed,fill,filist) {
      this.fileList3.push(`http://${this.tokenimgUrl}/${responed.key}`) ;
      console.log(this.fileList3,'响应信息')
    },
     // 图片列表 方法  -------------------------------------------------------|||||

    shouimg(val) {
      this.dialogVisible = true;
      this.dialogImageUrl = val;
    },
    deletImg(index) {
      this.fileList3.splice(index,1)
      console.log(123)
    },
    
    submitForm(formName,val) {
      let a,b,c;
      this.ruleForm2.options1.forEach(item => {
        if(item.id == this.ruleForm2.province){
          a = item.areaname
        }
      })
      this.ruleForm2.options2.forEach(item => {
        if(item.id == this.ruleForm2.city){
          b = item.areaname
        }
      })
      this.ruleForm2.options3.forEach(item => {
        if(item.id == this.ruleForm2.area){
          c = item.areaname
        }
      })
      const address = `${a}${b}${c}${this.ruleForm2.position}`;
      this.$refs.maps.searchAddr(address)

      if(!this.mapdata) {
        this.$message.error('无法获取地址')
      }
      
      console.log(this.mapdata)
      console.log('----------')
      return
      this.$refs[formName].validate( (valid) => {
        if (!valid) { this.$message.error('信息未填完整'); return}
      
        const obj = {
          "hospital_id":this.ruleForm2.hospital_id,
          "is_draft":val,
          "tel":this.ruleForm2.tel,
          "introduction":this.ruleForm2.introduction,
          "images":this.fileList3,
          "position":ruleForm2.position,
          "logo_url":this.ruleForm2.logo_url,
          "business_time":this.ruleForm2.business_time,
          "lng":posi,
          "lat":39.873848
        }
        // console.log(obj)
        Http.editHospitaInfo(obj)
        .then(res => {
          if ( res.data.code == 200){
            this.$message.success('信息修改成功');
            this.getToken()
          }
        })
      })
    },
    mapLng(val,arr){
      this.mapdata = val;
    }
  }
}
</script>

<style>
.disabled .el-upload--picture-card {
    display: none;
}
.infobox{
  width: 80%;
  background: #fff;
  padding:10px;
}
.avatar-uploaderInfo .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploaderInfo .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-iconInfo {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatarInfo {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
